<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!-- 管理员 -->
<link rel="stylesheet" href="../css/font-awesome.min.css">

<script type="application/javascript" src="/js/staffManage.js">

</script>
<script>
    function getClientHeight() {
        var clientHeight = 0;
        if (document.body.clientHeight && document.documentElement.clientHeight) {
            var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
        }
        else {
            var clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight : document.documentElement.clientHeight;
        }
        return clientHeight;
    }


</script>

<style>
    /*.tableHeader {
        text-align: center;
    }

    .tablebody {
        text-align: center;
    }

    #staff-list > .row {
        margin-left: 0;
        margin-right: 0;
    }

    .btn-circle {
        !*width: 30px;
        height: 30px;*!
        width: 2em;
        height: 2em;
        text-align: center;
        padding: 6px 0;
        font-size: 12px;
        line-height: 1.428571429;
        border-radius: 50%;
    }

    .btn-circle.btn-lg {
        width: 50px;
        height: 50px;
        padding: 10px 16px;
        font-size: 18px;
        line-height: 1.33;
        border-radius: 25px;
    }

    .btn-circle.btn-xl {
        width: 70px;
        height: 70px;
        padding: 10px 16px;
        font-size: 24px;
        line-height: 1.33;
        border-radius: 35px;
    }

    .footer .btn-change-page{
        font-size: 2.6em;
        color: #4d5e70;
        cursor: pointer;
        background-color: transparent;

    }

    .footer .btn-change-page:disabled{
        font-size: 2.6em;
        color: #7b8996;
        cursor: not-allowed;
        background-color: transparent;

    }


*/
    /*#staff-first-page, #staff-previous-page, #staff-next-page, #staff-last-page {
        font-size: 2.6em;
        color: #4d5e70;
        cursor: pointer;
        background-color: transparent;
    }

    #staff-first-page:disabled{
        font-size: 2.6em;
        color: whitesmoke;
        cursor: not-allowed;
        background-color: transparent;
    }
    #staff-previous-page:disabled{
        font-size: 2.6em;
        color: whitesmoke;
        cursor: not-allowed;
        background-color: transparent;
    }
    #staff-next-page:disabled{
        font-size: 2.6em;
        color: whitesmoke;
        cursor: not-allowed;
        background-color: transparent;
    }
    #staff-last-page:disabled {
        font-size: 2.6em;
        color: whitesmoke;
        cursor: not-allowed;
        background-color: transparent;
    }*/
</style>

<div role="tabpanel" class="tab-pane active" id="sour">
    <div class="check-div">
        <button class="btn btn-yellow btn-xs" data-toggle="modal" data-target="#add-staff-dialog">添加工作人员</button>
    </div>
    <div class="data-div">
        <div class="row tableHeader">
            <div class="col-xs-2">工号</div>
            <div class="col-xs-2">姓名</div>
            <div class="col-xs-2">权限</div>
            <div class="col-xs-4">邮箱</div>
            <div class="col-xs-2">操作</div>
        </div>
        <div id="staff-list" class="tablebody pre-scrollable"
             style="margin-left:-15px;padding-left: 30px;margin-right: -2px;margin-bottom: -25px;">
        </div>

    </div>
    <!--页码块-->

    <%--<nav class="navbar-fixed-bottom">
        <div class="container">--%>
    <footer class="footer" style="margin-top: 32px">
        <ul class="pagination">

            <%-- <li style="text-align: center;padding-top: 0" class="btn btn-success btn-xs btn-circle">
                 <i style="font-size: 1.6em;color: white;cursor: pointer;background-color: transparent" onclick="staffPreviousPage()" id="staff-first-page" class=" icon-double-angle-left"></i>
             </li>--%>

            <li>
                <a onclick="staffFirstPage()" id="staff-first-page"
                   class="btn icon-double-angle-left btn-change-page"></a>
            </li>
            <li>
                <a onclick="staffPreviousPage()" id="staff-previous-page"
                   class="btn icon-angle-left btn-change-page"></a>
            </li>
            <li>
                <select id="staff-page-select">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                </select>
                页
            </li>
            <li class="gray">
                共<i id="staff-total-page">20</i>页
            </li>

            <li>
                <a onclick="staffNextPage()" id="staff-next-page" class="btn icon-angle-right btn-change-page"></a>
            </li>

            <li>
                <a onclick="staffLastPage()" id="staff-last-page"
                   class="btn icon-double-angle-right btn-change-page"></a>
            </li>
        </ul>
    </footer>
    <%-- </div>
 </nav>--%>


    <div class="modal fade" id="add-staff-dialog" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">


                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="gridSystemModalLabel">添加人员</h4>
                </div>


                <div class="modal-body">
                    <div class="container-fluid">
                        <form class="form-horizontal" id="add-staff-form">

                            <div class="form-group ">
                                <label for="staff-username" class="col-xs-3 control-label">工号：</label>
                                <div class="col-xs-6 ">
                                    <input name="staffId" type="number" class="form-control input-sm duiqi"
                                           id="staff-username"
                                           placeholder="">
                                </div>
                            </div>

                            <div class="form-group ">
                                <label for="staff-name" class="col-xs-3 control-label">姓名：</label>
                                <div class="col-xs-6 ">
                                    <input name="name" type="text" class="form-control input-sm duiqi" id="staff-name"
                                           placeholder="">
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="staff-gender" class="col-xs-3 control-label">性别：</label>
                                <div class="col-xs-6 ">
                                    <input type="radio" name="gender" value="男" checked>男 &nbsp&nbsp&nbsp
                                    <input type="radio" name="gender" value="女">女
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="sCharacter" class="col-xs-3 control-label">类型：</label>
                                <div class="col-xs-6 ">
                                    <input type="radio" name="type" value="0" checked>管理员
                                    &nbsp&nbsp&nbsp
                                    <input type="radio" name="type" value="1">红娘
                                </div>
                            </div>

                            <%--<div class="form-group">
                                <label for="sCharacter" class="col-xs-3 control-label"> 头像：</label>
                                <div class="col-xs-6 ">
                                    <input name="imgfile" type="file"
                                           accept="image/gif, image/jpeg, image/png"/>
                                </div>
                            </div>
--%>
                            <div class="form-group ">
                                <label for="staff-email" class="col-xs-3 control-label">邮箱：</label>
                                <div class="col-xs-6 ">
                                    <input name="email" type="email" class="form-control input-sm duiqi"
                                           id="staff-email"
                                           placeholder="">
                                </div>
                            </div>

                            <div class="form-group ">
                                <label for="staff-password" class="col-xs-3 control-label">密码：</label>
                                <div class="col-xs-6 ">
                                    <input name="password" type="password" class="form-control input-sm duiqi"
                                           id="staff-password"
                                           placeholder="">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>


                <div class="modal-footer">
                    <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                    <button onclick="addStaff()" type="button" class="btn btn-xs btn-green">保 存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <div class="modal fade" id="update-staff-info-dialog" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">修改信息</h4>
                </div>


                <div class="modal-body">
                    <div class="container-fluid">
                        <form class="form-horizontal" id="update-staff-info-form">

                            <div class="form-group ">
                                <label for="update-staff-id" class="col-xs-3 control-label">工号：</label>
                                <div class="col-xs-6 ">
                                    <input readonly="readonly" name="staffId" type="number"
                                           class="form-control input-sm duiqi" id="update-staff-id"
                                           placeholder="">
                                </div>
                            </div>

                            <div class="form-group ">
                                <label for="update-staff-name" class="col-xs-3 control-label">姓名：</label>
                                <div class="col-xs-6 ">
                                    <input name="name" type="text" class="form-control input-sm duiqi"
                                           id="update-staff-name"
                                           placeholder="">
                                </div>
                            </div>


                            <div class="form-group">
                                <label for="update-staff-gender" class="col-xs-3 control-label">性别：</label>
                                <div class="col-xs-6 " id="update-staff-gender">
                                    <input id="update-staff-gender-0" type="radio" name="gender" value="男" checked>男
                                    &nbsp&nbsp&nbsp
                                    <input id="update-staff-gender-1" type="radio" name="gender" value="女">女
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="update-staff-type" class="col-xs-3 control-label">类型：</label>
                                <div class="col-xs-6 " id="update-staff-type">
                                    <label class="radio-inline">
                                        <input type="radio" name="type" id="update-staff-type-0" value="0" checked> 管理员
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="type" id="update-staff-type-1" value="1"> 红娘
                                    </label>
                                    <%--<input type="radio" name="type" value="0" checked>管理员
                                    &nbsp&nbsp&nbsp
                                    <input type="radio" name="type" value="1">红娘--%>
                                </div>
                            </div>

                            <%--<div class="form-group">
                                <label for="sCharacter" class="col-xs-3 control-label"> 头像：</label>
                                <div class="col-xs-6 ">
                                    <input name="imgfile" type="file"
                                           accept="image/gif, image/jpeg, image/png"/>
                                </div>
                            </div>
--%>
                            <div class="form-group">
                                <label for="update-staff-email" class="col-xs-3 control-label">邮箱：</label>
                                <div class="col-xs-6 ">
                                    <input readonly="readonly" name="email" type="email"
                                           class="form-control input-sm duiqi" id="update-staff-email"
                                           placeholder="">
                                </div>
                            </div>

                            <div class="form-group ">
                                <label for="update-staff-password" class="col-xs-3 control-label">密码：</label>
                                <div class="col-xs-6 ">
                                    <input name="password" type="password" class="form-control input-sm duiqi"
                                           id="update-staff-password"
                                           placeholder="">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                    <button onclick="updateStaffInfo()" type="button" class="btn btn-xs btn-green">保 存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

    <!--弹出删除权限警告窗口-->
    <div class="modal fade" id="deleteStaffAlert" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                </div>
                <div class="modal-body">
                    <div class="container-fluid">
                        确定要删除该权限？删除后不可恢复！
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-xs btn-white" data-dismiss="modal">取 消</button>
                    <button onclick="deleteStaff()" type="button" class="btn btn-xs btn-danger">保 存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>
